<template>
  <div style="margin-top:30px;">
    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item label="名称" prop="name" style="margin-right:15px">
              <el-input v-model="form.name" placeholder="请输入名称"/>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item label="手机号" prop="phone" style="margin-right:15px">
              <el-input v-model="form.phone" placeholder="请输入手机号"/>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item label="所属部门" prop="departmentCode" style="margin-right:15px">
              <!-- <groupSelect @setGroupCode="setGroupCode" :groupSelectValue='groupSelectValue'/> -->
                <el-cascader
                  v-model="groupSelectValue"
                  :options="options"
                  :props="{ checkStrictly: true }"
                  style="width:100%"
                  clearable></el-cascader>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item label="职位" prop="position" style="margin-right:15px">
              <el-select v-model="form.positionName" placeholder="请选择职位" clearable style="width:100%" @change="positionChange($event)">
                <el-option
                  v-for="item in positionList"
                  :key="item.code"
                  :label="item.name"
                  :value="item"
                />
              </el-select>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item label="工号" prop="employeeNumber" style="margin-right:15px">
              <el-input v-model="form.employeeNumber" placeholder="请输入工号" />
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item label="入职日期" prop="enrollmentDate" style="margin-right:15px">
              <el-date-picker style="width:100%" v-model="form.enrollmentDate" type="date" placeholder="请选择入职日期" value-format="yyyy-MM-dd HH-mm-ss"> </el-date-picker>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item label="用工类型" prop="employmentType" style="margin-right:15px">
              <el-select v-model="form.employmentType" placeholder="请选择用工类型" clearable style="width:100%">
                <el-option
                  v-for="item in employmentList"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                />
              </el-select>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item label="劳务外包方" prop="outsourcer" style="margin-right:15px">
              <el-select v-model="form.outsourcerName" placeholder="请选择劳务外包方" clearable style="width:100%" @change="outsourcerChange($event)">
                <el-option
                  v-for="item in outsourcerList"
                  :key="item.code"
                  :label="item.name"
                  :value="item"
                />
              </el-select>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
<!--      <el-row>-->
<!--        <el-col :span="24">-->
<!--          <div class="grid-content bg-purple">-->
<!--            <el-form-item  prop="salesMan" style="margin-right:15px">-->
<!--              <el-switch-->
<!--                v-model="salesMan"-->
<!--                active-text="是业务员"-->
<!--                inactive-text="非业务员" @change="changeValue($event)">-->
<!--              </el-switch>-->
<!--            </el-form-item>-->
<!--          </div>-->
<!--        </el-col>-->
<!--      </el-row>-->
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item label="父账号" prop="parentCode" style="margin-right:15px"  v-if="isParent">
              <el-select v-model="parentCode" placeholder="请选择"  clearable  @change="changeParentCode($event)">
                <el-option
                  v-for="item in parentData"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                />
              </el-select>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="funcCancel">取 消</el-button>
      <el-button type="primary" @click="funcSubmit" :disabled="isDisable">确 定</el-button>
    </div>
  </div>
</template>
<script>
  import Vue from 'vue'
  import 'xe-utils'
  import VXETable from 'vxe-table'
  import 'vxe-table/lib/index.css'
  import request from '@/utils/request'
  import groupSelect from "./groupSelect";
  import { listDict } from "@/api/store";
  Vue.use(VXETable)
  export default {
    name: 'PartyEdit',
    props: {
      staffRef: {
        type: String,
        required: true
      }
    },
    components: {
      groupSelect
    },
    data() {
      // 校验手机号
      const validatePhone = (rule, value, callback) => {
        const phoneReg = /^[1][0-9]{10}$/
        if (!phoneReg.test(value)) {
          callback(new Error('格式有误'))
        } else {
          callback()
        }
      }
      return {
        isDisable:false,
        isParent:false,
        emptyForm: {},
        parentData:[],
        groupSelectValue:[],
        options:[],
        salesMan:false,
        parentCode:'',
        form: {
          name: '',
          phone: '',
          branchCode: '',
          departmentCode: '',
          teamCode: '',
          isSalesMan:0
        },
        employmentList: [
          {
            code: 'regular',
            name: '正式工'
          },{
            code: 'temp',
            name: '临时工'
          },{
            code: 'out',
            name: '外包工'
          }
        ],
        rules: {
          name: [
            {required: true, message: '请输入姓名', trigger: 'blur'},

          ],
          departmentCode: [
            { required: true, message: '请选择所属部门', trigger: 'blur' }
          ],
          parentCode: [
            { required: true, message: '请选择父账号', trigger: 'blur' }
          ],
          phone: [
            {required: true, validator: validatePhone, trigger: 'blur'}
          ]
        },
        positionList: [],
        outsourcerList: []
      }
    },
    created() {
      this.getInfo()
      this.getCascade()
      this.getCascadeData()
    },
    methods: {
      // 获取字典数据 = 职位、劳务外包方
      getCascadeData() {
        listDict('positionType').then(response => {
          this.positionList = response.data[0].dictList
        })
        listDict('outsourcerType').then(response => {
          this.outsourcerList = response.data[0].dictList
        })
      },
      // 选择传值 字典数据 = 职位、劳务外包方
      positionChange(e) {
        this.form.position = e.code
        this.form.positionName = e.name
      },
      outsourcerChange(e) {
        this.form.outsourcer = e.code
        this.form.outsourcerName = e.name
      },
      changeValue(value){
        if (value == true){
          this.form.isSalesMan = 1;
          this.isParent = true
          if (this.form.branchCode != null && this.form.branchCode != ''){
            request({
              url: '/arpa-basic-api/staffs/chooseDataNotSalesMan',
              method: 'get',
              params: {isSalesMan:0,code:this.form.code,branchCode:this.form.branchCode}
            }).then(response => {
              this.parentData = response.data
            })
          }
        }else{
          this.form.isSalesMan = 0;
          this.isParent = false
        }
      },
      changeParentCode(value){
        this.parentCode = value
        this.form.parentCode = value
      },
      setGroupCode(value) {

        this.roleCodeList = []
        this.teamName = {}
        this.form.branchCode = ""
        this.form.departmentCode = ""
        this.form.teamCode = ""
        this.form.branchCode = value[0]
        if(value[1])
        this.form.departmentCode = value[1]
        if(value[2])
        this.form.teamCode = value[2]
        this.parentCode = ''
        if (this.form.isSalesMan == 1 && this.form.branchCode != null && this.form.branchCode != ''){
          request({
            url: '/arpa-basic-api/staffs/chooseDataNotSalesMan',
            method: 'get',
            params: {isSalesMan:0,code:this.form.code,branchCode:this.form.branchCode}
          }).then(response => {
            this.parentData = response.data
          })
        }
      },
      getCascade(){
        request({
          url: '/arpa-basic-api/staffs/cascadeData',
          method: 'get'
        }).then(response => {
          this.options = response.data
        })
      },
      // 获取页面信息
      getInfo() {
        let groupSelectValue = []
        // this.$refs.groupSelect.setSelectValue(this.groupSelectValue)
        request({url: `/arpa-basic-api/staffs/${this.staffRef}`, method: 'get'}).then(response => {
          this.form = JSON.parse(JSON.stringify(response.data))
          this.parentCode = this.form.parentCode
          if (this.form.branchCode != '')
            groupSelectValue.push(this.form.branchCode)
          if (this.form.departmentCode != '')
            groupSelectValue.push(this.form.departmentCode)
          // if (this.form.teamCode != ''){
          //   groupSelectValue.push(this.form.teamCode)
          // }
          this.groupSelectValue = groupSelectValue
          if (this.form.isSalesMan == '1'){
            this.salesMan = true;
            this.isParent = true
            request({
              url: '/arpa-basic-api/staffs/chooseDataNotSalesMan',
              method: 'get',
              params: {isSalesMan:0,code:this.form.code,branchCode:this.form.branchCode}
            }).then(response => {
              this.parentData = response.data
            })
          }else{
            this.salesMan = false;
            this.isParent = false
          }
          })
      },

      // 提交
      funcSubmit() {
        this.$refs['form'].validate((valid) => {
          if (valid) {
            this.isDisable = true
            const data = this.form
            console.info(data)
            request({url: '/arpa-basic-api/staffs', method: 'put', data}).then(response => {
              this.$message({message: response.msg, type: 'success'})
              this.$emit('fatherEditMethod')
              this.isDisable = false

            }).catch(() => this.isDisable = false)
          } else {
            return false
          }
        })
      },
      // 取消
      funcCancel() {
        this.$emit('fatherCancelMethod', 'edit')
      }

    }
  }
</script>
<style lang="scss" scoped>
  .dialog-footer {
    margin: 15px 0 15px 0;
    width: 175px;
    float: right;
  }
</style>
